<template>
  <button>{{ city }}</button>
  <div id="map"></div>
</template>
<script setup>
import { onMounted, ref,computed } from 'vue'
import { gaode_vector } from '../gaode_libs/gaode'
import { getLocation } from '../api/getGeojson'
var city = ref('')
var adcode = ref(0)
var localtion = ref([])
var url = computed(() => `https://geo.datav.aliyun.com/areas_v3/bound/${adcode.value}.json`)
var source = new ol.source.Vector({
})
var layer = new ol.layer.Vector({
  source,
})
onMounted(() => {
  const map = new ol.Map({
    target: 'map',
    layers: [gaode_vector],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 4,
      projection: 'EPSG:4326',
    }),
  })
  
  map.addLayer(layer)
  getLocationHttp()
  loadData()
  setTimeout(() => {
    map.getView().animate({
      center: [114.3, 30.5],
      zoom: 8,
    })
  }, 1000)
})
async function getLocationHttp() {
  let res = await getLocation()
  console.log(res.data.city)
  city.value = res.data.city
  adcode.value = res.data.adcode
  var positions = res.data.rectangle.split(';')
  var arr = []

  positions.forEach((item) => {
    arr.push(item.split(','))
  })
  /* turf */
  var point1 = turf.point(arr[0])
  var point2 = turf.point(arr[1])
  var midpoint = turf.midpoint(point1, point2)
  localtion.value = midpoint.geometry.coordinates
}
async function loadData() {
  fetch('https://geo.datav.aliyun.com/areas_v3/bound/420100.json')
      .then((res) => res.json())
      .then((data) => {
        var res = new ol.format.GeoJSON().readFeatures(data)
        console.log(res)
        source.addFeatures(res)
      })
}
</script>
